<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<?php $this->load->view('layout/Header'); ?>
	    <?php $this->load->view('layout/Modal'); ?>
	    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>Resources/Styles/Shop_Cart.css" />
	    <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>Resources/Styles/Payment.css" />
	    <script type="text/javascript">
	    	$(document).ready(function(){
	    		$('.input-number').blur(function(){
		        	$('#updatecart').click();
		        });
	    	});
	    </script>
		<title>DotA 2 Shop</title>
	    
	</head>
	<body>

		<!-- Nav bar -->

		<?php $this->load->view('layout/Navbar'); ?>

		<!-- End Nav -->

		<div class="row" id="row1">
			<div class="col-md-1"></div>

			<div class="col-md-10" id="menubar">
				<?php $this->load->view('layout/Menubar', $hero); ?>
			</div>
		</div>
		
		<br/>


		<!-- COntent -->
		<div class="row">
			<div class="col-md-2"></div>
			<div class="col-md-8">
				<div class="container">
		            <div class="row bs-wizard" style="border-bottom:0;">
		                <div class="col-xs-3 bs-wizard-step active">
		                  <div class="text-center bs-wizard-stepnum">Step 1</div>
		                  <div class="progress"><div class="progress-bar"></div></div>
		                  <a href="#" class="bs-wizard-dot"></a>
		                  <div class="bs-wizard-info text-center">Cart</div>
		                </div>
		                
		                <div class="col-xs-3 bs-wizard-step disabled">
		                  <div class="text-center bs-wizard-stepnum">Step 2</div>
		                  <div class="progress"><div class="progress-bar"></div></div>
		                  <a href="#" class="bs-wizard-dot"></a>
		                  <div class="bs-wizard-info text-center">Payment</div>
		                </div>
		                
		                <div class="col-xs-3 bs-wizard-step disabled">
		                  <div class="text-center bs-wizard-stepnum">Step 3</div>
		                  <div class="progress"><div class="progress-bar"></div></div>
		                  <a href="#" class="bs-wizard-dot"></a>
		                  <div class="bs-wizard-info text-center">Complete</div>
		                </div>
		            </div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-2">
			</div>

			<div class="col-md-8">
				<?php echo form_open('cart/load_cart'); ?>
					<table>
						<thead>
							<tr>
								<td colspan="4"><h3>Your Shopping Cart</h3></td>
							</tr>

							<tr class="tableheader">
								<td>ITEM</td>
								<td width="15%">PRICE</td>
								<td width="5%">QUANTITY</td>
								<td>SUB TOTAL</td>
								<td> </td>
							</tr>
						</thead>

						<tbody>
							<?php $i = 0; ?>
							<?php foreach ($this->cart->contents() as $items): ?>
								<?php $i++;?>
								<?php echo form_hidden($i.'_rowid', $items['rowid']); ?>
								<tr class="iteminfo">
									<td>
					                    <div class='row'>
					                    	<div class="col-md-4">
						                    	<div class="Image-item">
							         	           	<img class="productimage" src="<?php print $items['image']; ?>">
						                    	</div>
					                    	</div>
					                    	<div class="col-md-8">
						                    	<div class="Info-item">
								                    <p class="productinfo" id="nameitem"><small><b><?php print $items['name']; ?></b></small></p>
								                    <input type='hidden' name='productid' value="<?php print $items['id']; ?>" />
							                    </div>
						                    </div>
					                    </div>
									</td>
									<td>
										<p class="productprice"><b><small><?php print $items['price']; ?> VND</small></b></p>
									</td>
									<td>
									    <div class="input-group">
									    	<?php echo form_input(array('class' => 'input-number', 'id' => 'qty'.$i,'name' => $i.'_qty', 'value' => $items['qty'], 'maxlength' => '3', 'size' => '5', 'style'=>"text-align:center; color:black;")); ?>
									    </div>
									</td>
									<td>
										<p class="productprice"><b><small><?php print $items['subtotal']; ?> VND</small></b></p>
									</td>
									<td>
										<button class="btn btn-danger" id="item<?php print $i; ?>" onclick="delete_cart(<?php print $i; ?>);" value="<?php print $i; ?>_qty" ><span class="glyphicon glyphicon-trash"> </span></button>
									</td>
								</tr>
							<?php endforeach; ?>
						</tbody>

						<tfoot>
							<tr>
								<td colspan="5" style="text-align:right;" >
									<p class="productprice"><b><small>Total: <?php echo $this->cart->total(); ?> VND</small></b></p>
								</td>
							</tr>
							<tr>
								<td style="float:left;">
									<a href="<?php echo base_url(); ?>" ><button type='button' name='btnAction' value='ContinueShopping' class="btn btn-success btn-lg" style="float:right;" ><span class="glyphicon glyphicon-chevron-left"></span> Continue Shopping</button></a>
								</td>

								<td  colspan="2" style="text-align:right;">
									<a href="<?php echo base_url(); ?>cart/load_cart" ><button class="hidden" id="updatecart" class="btn btn-success btn-lg">Update Cart</button></a>
									<input type="hidden" name="capnhat" value="1" />
								</td>
								<td colspan="2">
									<a href="<?php echo base_url(); ?>payment" ><button type='button' name='btnAction' value='Chechout' class="btn btn-success btn-lg" style="float:right;" >Checkout <span class="glyphicon glyphicon-ok"></span></button></a>
								</td>
							</tr>
						</tfoot>
					</table>
				<?php echo form_close(); ?>
			</div>

			<div class="col-md-2">
			</div>
		</div>	


		<!-- Footer -->
		<?php $this->load->view('layout/Footer'); ?>

	</body>

	<script type="text/javascript">
		$(".input-number").keydown(function (e) {
		    // Allow: backspace, delete, tab, escape, enter and .
		    if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 190]) !== -1 ||
		         // Allow: Ctrl+A
		        (e.keyCode == 65 && e.ctrlKey === true) || 
		         // Allow: home, end, left, right
		        (e.keyCode >= 35 && e.keyCode <= 39)) {
		             // let it happen, don't do anything
		             return;
		    }
		    // Ensure that it is a number and stop the keypress
		    if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
		        e.preventDefault();
		    }
		});
	</script>
</html>